<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>SiteServer 管理后台</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="../assets/images/favicon.png" rel="icon" type="image/png">
  <link href="../assets/css/font-awesome-4.7.0.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/siteserver.min.css" rel="stylesheet" type="text/css" />
  <style>
    .nav .nav-link {
    font-weight: normal;
    border-radius: 1.25rem;
    font-size: 14px;
    }
    .editable, .editable a, .editable span {
      border-bottom: dashed 1px #0056b3 !important;
    }
    html, body{
      height: 100%;
    }
  </style>
</head>

<body class="p-0">
  <div id="main" class="m-t-15 m-b-15 m-l-15 m-r-15">
    <template v-if="pageLoad">
      <div class="card-box" style="padding: 10px; margin-bottom: 10px">
        <ul class="nav nav-pills nav-justified">
          <li class="nav-item">
            <a class="nav-link" href="javascript:;" @click="{btnNavClick('logs.html')}">数据列表</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;" @click="{btnNavClick('fields.html')}">字段管理</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;" @click="{btnNavClick('settings.html')}">选项设置</a>
          </li>
          <li class="nav-item" v-if="config.returnUrl">
            <a class="nav-link" :href="config.returnUrl">返回列表</a>
          </li>
        </ul>
      </div>
      <div v-if="pageAlert" class="alert" v-bind:class="{ 'alert-warning': pageAlert.type === 'warning', 'alert-success': pageAlert.type === 'success', 'alert-danger': pageAlert.type === 'danger' }">
        <button v-on:click="pageAlert = null" class="close" data-dismiss="alert">×</button>
        <span v-html="pageAlert.html"></span>
      </div>
      <div class="card-box">
        <template v-if="pageType === 'list'">
          <p class="text-muted font-14"> 请点击链接更改表单设置 </p>
          <table class="table table-bordered table-striped">
            <tbody>
              <tr>
                <td width="35%">表单状态</td>
                <td width="65%">
                  <a href="javascript:;" v-on:click="pageType = 'isClosed'" class="editable">
                    <span v-if="!formInfo.isClosed">启用表单</span>
                    <span v-if="formInfo.isClosed">禁用表单</span>
                  </a>
                </td>
              </tr>
              <tr>
                <td>表单名称</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'title'" class="editable"> {{ (formInfo.title ?
                    formInfo.title : '点击设置') }} </a>
                </td>
              </tr>
              <tr>
                <td>表单简介</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'description'" class="editable"> {{
                    (formInfo.description ? formInfo.description : '点击设置') }} </a>
                </td>
              </tr>
              <tr>
                <td>表单回复</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'isReply'" class="editable"> {{ formInfo.isReply ?
                    '启用表单回复功能' : '禁用表单回复功能' }} </a>
                </td>
              </tr>
              <tr>
                <td>表单每页显示数目(条)</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'pageSize'" class="editable"> 每页显示 {{ formInfo.pageSize }} 条 </a>
                </td>
              </tr>
              <tr>
                <td>提交时间限制</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'isTimeout'" class="editable"> {{
                    formInfo.isTimeout ? '限制提交时间' : '不限制' }} </a>
                </td>
              </tr>
              <tr>
                <td>验证码</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'isCaptcha'" class="editable"> {{
                    formInfo.isCaptcha ? '提交时显示验证码' : '不显示' }} </a>
                </td>
              </tr>
              <tr>
                <td>向管理员发送短信通知</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'isAdministratorSmsNotify'" class="editable"> {{
                    formInfo.isAdministratorSmsNotify ? '发送短信通知' : '不发送' }} </a>
                </td>
              </tr>
              <tr>
                <td>向管理员发送邮件通知</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'isAdministratorMailNotify'" class="editable"> {{
                    formInfo.isAdministratorMailNotify ? '发送邮件通知' : '不发送' }} </a>
                </td>
              </tr>
              <tr>
                <td>向用户发送短信通知</td>
                <td>
                  <a href="javascript:;" v-on:click="pageType = 'isUserSmsNotify'" class="editable"> {{
                    formInfo.isUserSmsNotify ? '发送短信通知' : '不发送' }} </a>
                </td>
              </tr>
            </tbody>
          </table>
        </template>
        <template v-else-if="pageType === 'isClosed'">
          <div class="form-group">
            <label>表单状态</label>
            <select v-model="formInfo.isClosed" class="form-control">
              <option v-bind:value="false">启用表单</option>
              <option v-bind:value="true">禁用表单</option>
            </select>
            <small class="form-text text-muted">选择禁用将导致用户无法提交表单</small>
          </div>
        </template>
        <template v-else-if="pageType === 'title'">
          <div class="form-group">
            <label> 表单名称 <small v-if="errors.has('title')" class="text-danger">{{ errors.first('title') }}</small>
            </label>
            <input v-model="formInfo.title" name="title" data-vv-as="表单名称" v-validate="'required'" :class="{'is-invalid': errors.has('title') }"
              type="text" class="form-control" />
          </div>
        </template>
        <template v-else-if="pageType === 'description'">
          <div class="form-group">
            <label> 表单简介 </label>
            <textarea v-model="formInfo.description" class="form-control"></textarea>
          </div>
        </template>
        <template v-else-if="pageType === 'isReply'">
          <div class="form-group">
            <label>表单回复</label>
            <select v-model="formInfo.isReply" class="form-control">
              <option :value="true">启用表单回复功能</option>
              <option :value="false">禁用表单回复功能</option>
            </select>
          </div>
        </template>
        <template v-else-if="pageType === 'pageSize'">
          <div class="form-group">
            <label>
              表单每页显示数目(条)
              <small v-if="errors.has('pageSize')" class="text-danger">{{
                errors.first('pageSize') }}</small>
            </label>
            <input v-model="formInfo.pageSize" name="pageSize"
              data-vv-as="表单每页显示数目" v-validate="'required|numeric|min:1'" :class="{'is-invalid': errors.has('pageSize') }"
              type="text" class="form-control" />
          </div>
        </template>
        <template v-else-if="pageType === 'isTimeout'">
          <div class="form-group">
            <label>提交时间限制</label>
            <select v-model="formInfo.isTimeout" class="form-control">
              <option :value="false">不限制</option>
              <option :value="true">限制提交时间</option>
            </select>
          </div>
          <div v-if="formInfo.isTimeout" class="form-group">
            <label>开始时间</label>
            <div>
              <date-picker style="width: 100%" v-model="formInfo.timeToStart" type="datetime" format="YYYY年MM月DD日 HH:mm"
                :minute-step="1" :clearable="false" :editable="false"></date-picker>
            </div>
          </div>
          <div v-if="formInfo.isTimeout" class="form-group">
            <label>结束时间</label>
            <div>
              <date-picker style="width: 100%" v-model="formInfo.timeToEnd" type="datetime" format="YYYY年MM月DD日 HH:mm"
                :minute-step="1" :clearable="false" :editable="false"></date-picker>
            </div>
          </div>
        </template>
        <template v-else-if="pageType === 'isCaptcha'">
          <div class="form-group">
            <label>验证码</label>
            <select v-model="formInfo.isCaptcha" class="form-control">
              <option :value="true">提交时显示验证码</option>
              <option :value="false">不显示</option>
            </select>
          </div>
        </template>
        <template v-else-if="pageType === 'isAdministratorSmsNotify'">
          <div class="form-group">
            <label>向管理员发送短信通知</label>
            <select v-model="formInfo.isAdministratorSmsNotify" class="form-control">
              <option :value="true">发送短信通知</option>
              <option :value="false">不发送</option>
            </select>
            <small class="form-text text-muted">启用短信发送后将自动为每一条新增提交发送短信给指定手机</small>
          </div>
          <div v-if="formInfo.isAdministratorSmsNotify" class="form-group">
            <label> 发送通知短信模板Id <small v-if="errors.has('administratorSmsNotifyTplId')" class="text-danger">{{
                errors.first('administratorSmsNotifyTplId') }}</small>
            </label>
            <input v-model="formInfo.administratorSmsNotifyTplId" name="administratorSmsNotifyTplId"
              data-vv-as="发送通知短信模板Id" v-validate="'required'" :class="{'is-invalid': errors.has('administratorSmsNotifyTplId') }"
              type="text" class="form-control" />
            <small class="form-text text-muted">需进入短信供应商模板管理界面，添加通知类短信模板并获取模板Id</small>
          </div>
          <div v-if="formInfo.isAdministratorSmsNotify" class="form-group">
            <label> 短信模板包含变量 </label>
            <div class="m-2">
              <div v-for="attributeName in attributeNames" class="checkbox checkbox-primary form-check-inline">
                <input v-model="administratorSmsNotifyKeys" type="checkbox" :id="attributeName" :value="attributeName">
                <label :for="attributeName"> {{ getAttributeText(attributeName) }} </label>
              </div>
            </div>
            <small class="form-text text-muted">请勾选短信模板文字中包含的变量，请确保变量名大小写一致</small>
          </div>
          <div v-if="formInfo.isAdministratorSmsNotify" class="form-group">
            <label> 管理员接受短信通知手机号 <small v-if="errors.has('administratorSmsNotifyMobile')" class="text-danger">{{
                errors.first('administratorSmsNotifyMobile') }}</small>
            </label>
            <input v-model="formInfo.administratorSmsNotifyMobile" name="administratorSmsNotifyMobile"
              data-vv-as="管理员接受短信通知手机号" v-validate="'required|mobile'" :class="{'is-invalid':
errors.has('administratorSmsNotifyMobile') }"
              type="text" class="form-control" />
          </div>
        </template>
        <template v-else-if="pageType === 'isAdministratorMailNotify'">
          <div class="form-group">
            <label>向管理员发送邮件通知</label>
            <select v-model="formInfo.isAdministratorMailNotify" class="form-control">
              <option :value="true">发送邮件通知</option>
              <option :value="false">不发送</option>
            </select>
            <small class="form-text text-muted">启用邮件发送后将自动为每一条新增提交发送邮件给指定邮箱</small>
          </div>
          <div v-if="formInfo.isAdministratorMailNotify" class="form-group">
            <label> 管理员接受邮件通知邮箱 <small v-if="errors.has('administratorMailNotifyAddress')" class="text-danger">{{
                errors.first('administratorMailNotifyAddress') }}</small>
            </label>
            <input v-model="formInfo.administratorMailNotifyAddress" name="administratorMailNotifyAddress"
              data-vv-as="管理员接受邮件通知邮箱" v-validate="'required|email'" :class="{'is-invalid':
errors.has('administratorMailNotifyAddress') }"
              type="text" class="form-control" />
          </div>
        </template>
        <template v-else-if="pageType === 'isUserSmsNotify'">
          <div class="form-group">
            <label>向用户发送短信通知</label>
            <select v-model="formInfo.isUserSmsNotify" class="form-control">
              <option :value="true">发送短信通知</option>
              <option :value="false">不发送</option>
            </select>
            <small class="form-text text-muted">启用短信发送后将自动向信息提交人发送提交成功短信</small>
          </div>
          <div v-if="formInfo.isUserSmsNotify" class="form-group">
            <label> 发送通知短信模板Id <small v-if="errors.has('userSmsNotifyTplId')" class="text-danger">{{
                errors.first('userSmsNotifyTplId') }}</small>
            </label>
            <input v-model="formInfo.userSmsNotifyTplId" name="userSmsNotifyTplId"
              data-vv-as="发送通知短信模板Id" v-validate="'required'" :class="{'is-invalid': errors.has('userSmsNotifyTplId') }"
              type="text" class="form-control" />
            <small class="form-text text-muted">需进入短信供应商模板管理界面，添加通知类短信模板并获取模板Id</small>
          </div>
          <div v-if="formInfo.isUserSmsNotify" class="form-group">
            <label> 短信模板包含变量 </label>
            <div class="m-2">
              <div v-for="attributeName in attributeNames" class="checkbox checkbox-primary form-check-inline">
                <input v-model="userSmsNotifyKeys" type="checkbox" :id="attributeName" :value="attributeName">
                <label :for="attributeName"> {{ getAttributeText(attributeName) }} </label>
              </div>
            </div>
            <small class="form-text text-muted">请勾选短信模板文字中包含的变量，请确保变量名大小写一致</small>
          </div>
          <div v-if="formInfo.isUserSmsNotify" class="form-group">
            <label> 手机号码字段 <small v-if="errors.has('userSmsNotifyMobileName')" class="text-danger">{{
                errors.first('userSmsNotifyMobileName') }}</small>
            </label>
            <select v-model="formInfo.userSmsNotifyMobileName" name="userSmsNotifyMobileName"
              data-vv-as="手机号码字段" v-validate="'required'" :class="{'is-invalid': errors.has('userSmsNotifyMobileName') }" class="form-control">
              <option v-for="fieldInfo in fieldInfoList" :value="fieldInfo.title">{{fieldInfo.title}}</option>
            </select>
            <small class="form-text text-muted">请选择表单字段中设置的手机号码字段，信息提交后将向此发送短信</small>
          </div>
        </template>
        <div v-if="pageType !== 'list'">
          <hr />
          <div class="text-center">
            <button class="btn btn-primary m-r-5" v-on:click="btnSubmitClick">保 存</button>
            <button class="btn m-r-5" v-on:click="pageType = 'list'">返 回</button>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="text-center" style="margin-top: 100px">
        <img class="mt-3" src="../assets/images/loading.gif" />
        <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
      </div>
    </template>
  </div>
</body>

</html>
<script src="../assets/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../assets/lib/lodash-4.17.10.min.js" type="text/javascript"></script>
<script src="../assets/lib/layer-3.1.1/layer.js" type="text/javascript"></script>
<script src="../assets/lib/sweetalert2-7.28.4.all.min.js" type="text/javascript"></script>
<script src="../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../assets/lib/vee-validate-2.1.0.js"></script>
<script src="../assets/lib/vee-validate-locale-zh_CN-2.1.0.js"></script>
<script src="../assets/lib/js.cookie-2.2.0.js"></script>
<script src="../assets/lib/es6-promise.auto.min.js"></script>
<script src="../assets/lib/axios-0.18.0.min.js"></script>
<script src="../assets/lib/vue2-datepicker-2.4.3.min.js"></script>
<script src="../assets/js/utils.js" type="text/javascript"></script>
<script src="settings.js" type="text/javascript"></script>
